<!-- <!DOCTYPE html> -->
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			body{
				background-image: url(Login/bg.jpg);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			#login{
				width: 100%;
				height: 100%;
			}
			#box{
				width: 100%;
				height: 100%;
			}
			
			form{
				width: 300px;
				height: 100px;
				margin: 0 auto;
				text-align:center;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
			#user{
				top: 10%;
			}
			input{
				height: 20px;
				width: 200px;
				background: none;
				border: none;
				border-bottom: 1px solid #383636;
				outline: none;
			}
			input:focus{
				border-bottom: 2px solid #ff0052;
			}
			#paw{
				top: 44%;
			}
			#user,#paw{
				position: absolute;
				left: 50%;
				transform: translate(-50%,-50%);
			}
			#img img{
				width: 135px;
				height: 45px;
				margin-top: 10px;
			}
			#img1{
				position: absolute;
				top: 55%;
				left: 32%;
				transform: translate(-50%,-50%);
			}
			#img2{
				position: absolute;
				top: 55%;
				right: 0;
				transform: translate(-50%,-50%);
			}
			
			::-webkit-input-placeholder { /* WebKit, Blink, Edge */
			    color:#fff;
			}
			:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
			   color:#fff;
			   opacity:  1;
			}
			::-moz-placeholder { /* Mozilla Firefox 19+ */
			   color:#fff;
			   opacity:  1;
			}
			:-ms-input-placeholder { /* Internet Explorer 10-11 */
			   color:#fff;
			}
		</style>
	</head>
	<body>
		<div id="login">
			<div id="box">
				<form action="" method="">
					<input type="text" id="user" value="" placeholder="账号" />
					<br>
					<input type="password" id="paw" value="" placeholder="密码" />
				</form>
				<div id="img">
					<img id="img1" src="Login/btn_login_n.png" onclick="login()">
					<img id="img2" src="Login/btn_logout_n.png" onclick="logout()">
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var img1 = document.getElementById('img1');
			img1.onmouseover = function(){
				img1.src = 'Login/btn_login_p.png';;
				img1.onmouseout = function(){
					img1.src = 'Login/btn_login_n.png';
				};
			};
			var img2 = document.getElementById('img2');
			img2.onmouseover = function(){
				img2.src = 'Login/btn_logout_p.png';;
				img2.onmouseout = function(){
					img2.src = 'Login/btn_logout_n.png';
				};
			};
			// function login() {
			// 	location.href = "index.html";
			// }
			
			function login() {
				var username = document.getElementById("user").value;
				var password = document.getElementById("paw").value;
				if (username == "111" && password == "123456") {
					alert("登录成功");
					window.location.href = "index.html";
					return false;
				} else {
					alert("账号或密码错误");
					window.location.href = "login.html";
					return false;
				}
			}
		</script>
	</body>
</html>
